<template>
  <div class="subPage">
    <div>
        <nav-bar
        v-if="!isComponent"
        :title="navTitle"
        position="center"
        color='linear-gradient(90deg,rgba(85,125,245,1) 0%,rgba(63,74,222,1) 100%)'
        :rowColor="'white'"
        :goBack="goBack"
        :isMsg='false'
        fontColor='#fff' ></nav-bar>
    </div>
    <div class="flexContent" >
      <scroll-view
      :scroll-y="true"
      v-if="recordList.length>0"
      style="flex:1;overflow-y: scroll;"
      :refresher-triggered="triggered"
      :refresher-enabled="enabled"
      @refresherrefresh="queryList"
      :scroll-with-animation='true'
      >
        <div class="addressBox" v-for="(item,i) in recordList" :key="i" >
          <div class="addressMsg" @click="returnChooseAddress(item)">
            <div class="msgBox1" >
              <span class="name">{{item.consignee }} </span>
              <span>{{item.phone }} </span>
              <span>邮编:{{item.zip_tag}}</span>
            </div>
            <div class="msgBox2" >
              {{item.zones.province.name}}
              {{item.zones.city.name}}
              {{item.zones.area.name}}
              {{item.street}}
            </div>
          </div>
          <div class="opearet borderBtm">
            <span @click="changeCheck(item,i)">
              <img
                :src="item.is_default== 1 ? mycheckedImg : uncheckedImg"
                class="checked-image"
                alt=""
              />
              <span :class="{'blueColor':item.is_default== 1}" >{{item.is_default== 1  ? '默认地址' : '设为默认'}}</span>
            </span>
            <p class="edit">
              <span @click="clickEditBtn(false,item)" >
                <img :src="editPeoImg" alt="" />
                编辑
              </span>
              <span @click="clickEditBtn(true,item)" >
                <img :src="deletePeoImg" alt="" />
                删除
              </span>
            </p>
          </div>
        </div>
      </scroll-view>
      <div v-else class="noDataImg">
        <img class="noneAddress" :src="noDataImg"/>
        <span>无地址，请添加新地址！</span>
      </div>
      <div class="addBtn" v-if="!editAddressModal" >
          <span class="recode blueColor " @click="addNewAddress">
             <span class="plus" >+</span>
            <span>添加收货地址</span>
          </span>
          <!-- <img :src="btnBgImg" alt=""> -->
      </div>
      <div :class="{'ipxBottom':ifIphonex}" ></div>
      <!-- 新增、编辑地址弹窗 层-->
      <div class="initTop" v-if="editAddressModal">
        <div class="addressDiv">
          <div class="item clearfix borderBtm">
            <div class="name fl">收货人姓名</div>
            <input
              class="fr ipt"
              placeholder="请填写收货人姓名"
              v-model="postFrom.receive_name"
              type="text"
              maxlength="20"
            />
          </div>
          <div class="item clearfix borderBtm">
            <div class="name fl">手机号码</div>
            <input
              class="fr ipt"
              placeholder="请填写手机号码"
              type="number"
              maxlength="11"
              v-model="postFrom.phone"
            />
          </div>
<!--          <picker mode="region" @change="regionChange" :value="region">-->
<!--            <div class="item clearfix borderBtm nowrap">-->
<!--              <div class="name fl">所在地区</div>-->
<!--              <div class="fr ipt">-->
<!--                <span v-if="region[0] !== ''">{{ region[0] }}{{ region[1] }}{{ region[2] }}</span>-->
<!--                <span v-else style="color:#808080">请选择所在地区</span>-->
<!--              </div>-->
<!--            </div>-->
<!--          </picker>-->
          <picker
            slot="footer"
            @columnchange="columnchange"
            @change="areaChange"
            @cancel="areaCancel"
            :value="areaArr"
            mode="multiSelector"
            :range="areaList"
            range-key="name"
          >
<!--            <div class="picker">-->
<!--              <span-->
<!--                v-if="areaArr[1] >= 0"-->
<!--                class="color666"-->
<!--              >{{areaList[0][areaArr[0]].name}} {{areaList[1][areaArr[1]].name}}</span>-->
<!--              <div v-else style="color: #666; float: right;">请选择</div>-->
<!--            </div>-->
            <div class="item clearfix borderBtm nowrap">
              <div class="name fl">所在地区</div>
              <div class="fr ipt">
                <span v-if="areaString">{{areaString}}</span>
                <span v-else style="color:#808080">请选择</span>
              </div>
            </div>
          </picker>
          <div class="item clearfix borderBtm">
            <div class="name fl">邮政编码</div>
            <input
              class="fr ipt"
              placeholder="邮政编码"
              type="number"
              maxlength="6"
              v-model="postFrom.postal_code"
            />
          </div>
          <div class="item clearfix borderBtm">
            <div class="name fl">详细地址</div>
            <input
              class="fr ipt"
              placeholder="请填写详细地址"
              type="text"
              maxlength="50"
              v-model="postFrom.detail_address"
            />
          </div>
          <div class="opearet borderBtm">
            <span @click="postFrom.is_default=!postFrom.is_default">
              <img
                :src="postFrom.is_default ? mycheckedImg : uncheckedImg"
                class="checked-image"
                alt=""
              />
              <span :class="{'blueColor':postFrom.is_default}">{{postFrom.is_default?'默认地址':'设为默认'}}</span>
              </span>
          </div>
        </div>
        <div class="submitBtn">
            <span class="recode" @click="editAddress">保存</span>
            <img :src="btnBgImg" alt="">
        </div>
      </div>
    </div>
    <div class="modal" v-if="visible">
        <div class="out">
            <div class="top" >
                <span>您确定要删除此收货地址吗？</span>
            </div>
            <div class="btm">
                <span @click='visible=false'>取消</span>
                <span @click="deleteAdress">确定</span>
            </div>
        </div>
    </div>
    <i-message id="message" />
    <i-toast id="toast" />
  </div>
</template>
<script>
import api from '@/api/api'
import storage from '@/utils/storage'
import navBar from '@/components/navBar'
import { mapState } from 'vuex'
const { $Toast, $Message } = require('../../../../../static/iview/base/index')
export default {
  components: {
    navBar
  },
  computed: {
    ...mapState([
      'ifIphonex'
    ])
  },
  props: {
    isComponent: Boolean || false
  },
  data () {
    return {
      userInfo: {},
      visible: false,
      postFrom: {
        receive_name: '',
        province_name: '',
        province_code: '',
        city_name: '',
        city_code: '',
        district_name: '',
        district_code: '',
        detail_address: '',
        phone: '',
        // order_no: "",
        postal_code: '',
        is_default: false
      },
      region: ['', '', ''],
      imgUrl: '',
      mycheckedImg: '',
      uncheckedImg: '',
      editPeoImg: '',
      deletePeoImg: '',
      noDataImg: '',
      rightImg: '',
      btnBgImg: '',
      editAddressModal: false,
      navTitle: '收货地址',
      recordList: [],
      triggered: false,
      enabled: true,
      nowDeleteItem: {},
      nowEditItem: {},
      isEdit: false,
      areaList: [[], [], []],
      areaArr: [0, 0, 0],
      oldArr: [0, 0, 0],
      areaString: ''
    }
  },
  onLoad (options) {
    this.imgUrl = api.imgUrl
    this.userInfo = this.$storage.getAccountInfo()
    console.log('this.userInfo', this.userInfo)
    // this.postFrom.receive_name = this.userInfo.patient_name;
    // this.postFrom.phone = this.userInfo.phone;
    this.postFrom.receive_name = ''
    this.postFrom.phone = ''
    this.postFrom.detail_address = ''
    this.postFrom.postal_code = ''
    this.region[0] = ''
    this.mycheckedImg = this.imgUrl + 'mychecked.png'
    this.uncheckedImg = this.imgUrl + 'unchecked.png'
    this.editPeoImg = this.imgUrl + 'edit_peo.png'
    this.deletePeoImg = this.imgUrl + 'delete_peo.png'
    // this.noDataImg = this.imgUrl + 'noData.png'
    this.noDataImg = require('../../../../../static/images/noneAddress.png')
    this.rightImg = this.imgUrl + 'right.png'
    this.btnBgImg = this.imgUrl + 'btnBg.png'
    this.queryList()

  },
  onUnload () {
    this.isEdit = false
    this.visible = false
    this.editAddressModal = false
    this.nowEditItem = {}
    this.nowDeleteItem = {}
  },
  methods: {
    areaCancel() {
      this.areaArr = JSON.parse(JSON.stringify(this.oldArr))
      console.log('取消', this.areaArr)
      this.cityList(this.areaList[0][this.areaArr[0]].id, 1, this.areaArr[1])
    },
    areaChange (e) {
      let arr = e.mp.detail.value
      let provinceId = (this.areaList[0][arr[0]].id + "").substring(0, 2);
      let cityId1 = (this.areaList[1][arr[1]].id + "").substring(0, 2);
      let cityId2 = (this.areaList[1][arr[1]].id + "").substring(0, 4);
      let districtId = (this.areaList[1][arr[1]].id + "").substring(0, 4);
      // 解决快速滑动 然后点击确认问题
      if(provinceId != cityId1 || cityId2 != districtId) {
        this.areaCancel()
        return
      }
      this.areaArr = JSON.parse(JSON.stringify(e.mp.detail.value))
      this.oldArr = JSON.parse(JSON.stringify(e.mp.detail.value))
      this.areaString = `${this.areaList[0][arr[0]].name} ${this.areaList[1][arr[1]].name} ${this.areaList[2][arr[2]].name}`
      this.postFrom.province_name = this.areaList[0][arr[0]].name
      this.postFrom.city_name = this.areaList[1][arr[1]].name
      this.postFrom.district_name = this.areaList[2][arr[2]].name
      this.postFrom.province_code = this.areaList[0][arr[0]].id
      this.postFrom.city_code = this.areaList[1][arr[1]].id
      this.postFrom.district_code = this.areaList[2][arr[2]].id
      console.log(this.postFrom)
    },
    columnchange (e) {
      let that = this;
      if (e.mp.detail.column == 0) {
        that.areaArr[0] = e.mp.detail.value;
        that.areaArr[1] = 0;
        that.areaList[1] = [];
        that.areaArr[2] = 0;
        that.areaList[2] = [];
        that.cityList(that.areaList[0][that.areaArr[0]].id,1)
      } else if(e.mp.detail.column == 1) {
        that.areaArr[1] = e.mp.detail.value;
        that.areaArr[2] = 0;
        that.areaList[2] = [];
        that.cityList(that.areaList[1][that.areaArr[1]].id,2)
      }
    },
    // 获取省级行政资源
    zoneList () {
      let that = this
      that.$api.addressZoneList({ zone_id: 1 }, { showLoading: true }).then(function (res) {
        that.areaList[0] = res.data
        that.cityList(res.data[0].id, 1) // 查默认地区列表
      })
    },
    /*
    id: 省id
    num：1 为知道省查市，2 为知道市查区 （默认情况）
    subId：知道市的id
     */
    cityList(id, num, subIdx) {
      let that = this;
      that.$api
        .addressZoneList({ zone_id: id }, { showLoading: false })
        .then(function(res) {
          if(num == 1) {
            that.areaList[1] = res.data;
            if(subIdx) {
              that.cityList(res.data[subIdx].id, 2)
            } else {
              that.cityList(res.data[0].id, 2)
            }
          } else {
            that.areaList[2] = res.data;
            that.areaList = JSON.parse(JSON.stringify(that.areaList))
          }
        });
    },
    // 给父组件返回所选择的地址
    returnChooseAddress (item) {
      if (!this.isComponent) return
      // console.log('选中了',item)
      this.$emit('beingChooseAdress', item)
    },
    // 地区选择
    regionChange (e) {
      let that = this
      console.log('e', e)
      that.code = e.mp.detail.code
      let value = e.mp.detail.value
      if (
        that.code[0] == '710000' ||
        that.code[0] == '810000' ||
        that.code[0] == '820000'
      ) {
        wx.showToast({
          title: '暂不支持该地区，请重新选择',
          icon: 'none',
          duration: 2000
        })
        return
      }
      that.region = e.mp.detail.value
      that.postFrom.postal_code = e.mp.detail.postcode
      that.postFrom.province_name = that.region[0]
      that.postFrom.city_name = that.region[1]
      that.postFrom.district_name = that.region[2]
      that.postFrom.province_code = that.code[0]
      that.postFrom.city_code = that.code[1]
      that.postFrom.district_code = that.code[2]
    },
    // 获取地址列表
    queryList () {
      this.triggered = true
      let param = {
        patient_id: this.userInfo.patient_id
      }
      this.$api.getAddressList(param, ({'showLoading': true})).then(res => {
        this.triggered = false
        this.recordList = res.data
      })
    },
    // 点击编辑 删除 按钮
    clickEditBtn (jud, item) {
      if (jud) {
        this.nowDeleteItem = item
        this.visible = true
      } else {
        this.nowEditItem = item
        this.isEdit = true
        this.areaString = item.zones.province.name + ' ' + item.zones.city.name + ' ' + item.zones.area.name
        // this.region[0] = item.zones.province.name
        // this.region[1] = item.zones.city.name
        // this.region[2] = item.zones.area.name
        this.postFrom.detail_address = item.street
        this.postFrom.postal_code = item.zip_tag + ''
        this.postFrom.district_code = item.zone_id + ''
        this.postFrom.phone = item.phone
        this.postFrom.receive_name = item.consignee
        this.postFrom.is_default = item.is_default == '1'
        this.editAddressModal = true // 显示编辑弹层
        this.$api.addressZoneList({ zone_id: 1 }, { showLoading: true }).then((res) => {
          this.areaList[0] = res.data
          for(let i = 0; i < res.data.length; i++) {
            if(item.zones.province.id == res.data[i].id) {
              this.areaArr[0] = i
            }
          }
        }).then(() => {
          this.$api.addressZoneList({ zone_id: item.zones.province.id }, { showLoading: true }).then((res1) => {
            this.areaList[1] = res1.data
            for(let i = 0; i < res1.data.length; i++) {
              if(item.zones.city.id == res1.data[i].id) {
                this.areaArr[1] = i
              }
            }
          })
        }).then(() => {
          this.$api.addressZoneList({ zone_id: item.zones.city.id }, { showLoading: true }).then((res2) => {
            this.areaList[2] = res2.data
            for(let i = 0; i < res2.data.length; i++) {
              if(item.zones.area.id == res2.data[i].id) {
                this.areaArr[2] = i
              }
            }
            this.areaArr = JSON.parse(JSON.stringify(this.areaArr))
            this.oldArr = JSON.parse(JSON.stringify(this.areaArr))
            this.areaList = JSON.parse(JSON.stringify(this.areaList))
          })
        })
      }
    },
    // 删除地址
    deleteAdress () {
      this.$api.deleteAddress({id: this.nowDeleteItem.id}, ({'showLoading': true})).then(res => {
        if (res.code == 0) {
          $Toast({
            content: '删除成功',
            type: 'success'
          })
        }
        setTimeout(() => {
          this.visible = false
          this.queryList()
        }, 500)
      })
    },
    // 设为默认地址
    changeCheck (item, index) {
      let param = {
        consignee: item.consignee,
        id: item.id,
        phone: item.phone,
        street: item.street,
        zone_id: item.zone_id,
        is_default: item.is_default == '1' ? '0' : '1',
        remark: '',
        zip_tag: item.zip_tag,
        patient_id: this.userInfo.patient_id
      }
      this.$api.editAddressInfo(param, ({'showLoading': true})).then(res => {
        if (res.code == 0) {
          $Toast({
            content: '修改成功',
            type: 'success'
          })
          setTimeout(() => {
            this.queryList()
          }, 500)
        }
      })
    },
    // 编辑、新增地址 保存按钮
    editAddress () {
      if (this.postFrom.receive_name.trim() === '' ||
        this.postFrom.phone.trim() === '' ||
        this.postFrom.detail_address.trim() === '' || !this.postFrom.district_code) {
        $Toast({content: '请填写完整的地址信息'})
        return
      }
      if(this.postFrom.postal_code.trim().length != 6) {
        $Toast({content: '请输入正确的邮政编码'})
        return
      }
      let param = {
        consignee: this.postFrom.receive_name,
        phone: this.postFrom.phone,
        street: this.postFrom.detail_address,
        zone_id: this.postFrom.district_code,
        is_default: this.postFrom.is_default ? '1' : '0',
        remark: '',
        zip_tag: this.postFrom.postal_code,
        patient_id: this.userInfo.patient_id
      }
      console.log(param, '传参')
      if (this.isEdit) {
        param.id = this.nowEditItem.id
        this.$api.editAddressInfo(param, ({'showLoading': true})).then(res => {
          if (res.code == 0) {
            $Toast({
              content: '修改成功',
              type: 'success'
            })
            setTimeout(() => {
              this.editAddressModal = false
              this.queryList()
            }, 500)
          }
        })
        return
      }
      this.$api.saveNewAddress(param, ({'showLoading': true})).then(res => {
        if (res.code == 0) {
          $Toast({
            content: '添加成功',
            type: 'success'
          })
          setTimeout(() => {
            this.editAddressModal = false
            this.queryList()
          }, 500)
        }
      })
      this.editAddressModal = true
      this.navTitle = '收货地址'
    },
    // 新增地址
    addNewAddress () {
      this.zoneList()
      this.isEdit = false
      this.postFrom.receive_name = ''
      this.postFrom.phone = ''
      this.postFrom.detail_address = ''
      this.postFrom.postal_code = ''
      this.region[0] = ''
      this.editAddressModal = true
      this.postFrom.is_default = false
      this.areaString = ''
      this.areaArr = [0, 0, 0]
      this.oldArr = [0, 0, 0]
    },
    goBack () {
      if (this.editAddressModal) {
        this.editAddressModal = false
        this.navTitle = '收货地址'
      } else {
        this.$router.go(-1)
      }
    }
  }
}
</script>
<style scoped lang="less">
.subPage {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.flexContent {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  .addressBox {
    height: 264rpx;
    box-sizing: border-box;
    border-bottom: 16rpx solid #f9f9f9;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    .addressMsg {
      flex: 1;
      padding: 20rpx 30rpx 0 30rpx;
      .msgBox1 {
        height: 45%;
        color: #333333;
        font-size: 34rpx;
        font-weight: bold;
        span {
          margin-right: 15rpx;
          float: left;
        }
        span:nth-child(3) {
          float: right;
        }
        .name {
          display: inline-block;
          max-width: 200rpx;
          min-width: 120rpx;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
      }
      .msgBox2 {
        height: 54%;
        font-size: 28rpx;
        color: #666666;
        border-bottom: 1rpx solid #E9E9E9;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        word-break: break-all;
      }
    }
  }
  .blueColor {
    color: #4A71E8;
  }
  .noDataImg {
    flex: 1;
    position: relative;
    .noneAddress {
      height: 720rpx;
      width: 720rpx;
      left: 45%;
      top: 37%;
    }
    span {
      position: absolute;
      font-size: 32rpx;
      color: #CCCCCC;
      top: 61%;
      left: 30%;
    }
  }
  .ipxBottom {
    height: 30rpx;
  }
  .addBtn {
    position: relative;
    // height: 180rpx;
    // overflow: hidden;
    padding: 30rpx;
    box-sizing: border-box;
    .recode {
      display: flex;
      position: relative;
      width: 100%;
      height: 90rpx;
      line-height: 90rpx;
      color: #fff;
      font-size: 36rpx;
      border: 1rpx solid #A0B7ED;
      span:nth-child(2) {
        flex: 1;
        text-align: left;
        height: 100%;
      }
      .plus {
        text-align: right;
        width: 38%;
        font-size: 60rpx;
        line-height: 80rpx;
        margin-right: 10rpx;
      }
    }
    .blueColor {
      color: #4A71E8;
    }
  }
  .submitBtn {
    position: relative;
    height: 140rpx;
    overflow: hidden;
    .recode {
      position: absolute;
      width: 100%;
      text-align: center;
      line-height: 50rpx;
      margin-top: 35rpx;
      color: #fff;
      font-size: 36rpx;
    }
    img {
      height: 100%;
      width: 100%;
    }
  }
}
.initTop {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 22;
  display: flex;
  flex-direction: column;
  .addressDiv {
    background: rgba(255, 255, 255, 1);
    flex: 1;
    width: 100%;
    border-radius: 10rpx;
    .init1 {
      height: 110rpx;
      line-height: 110rpx;
      padding-left: 39rpx;
      font-size: 34rpx;
      font-weight: bold;
    }
    .item {
      height: 100rpx;
      line-height: 100rpx;
      padding: 0 33rpx 0 34rpx;
      display: flex;
      .name {
        font-size: 34rpx;
        color: #333333;
      }
      .ipt {
        flex: 1;
        height: 100rpx;
        line-height: 100rpx;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 30rpx;
      }
    }
    .borderBtm {
      border-bottom: 1rpx solid #e9e9e9;
    }
  }
}
.opearet {
  width: 100%;
  height: 100rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .checked-image {
    width: 48rpx;
    height: 48rpx;
    margin:0 20rpx 0 0;
    vertical-align: middle;
  }
}
.edit {
  span {
    margin: 0 10rpx;
  }
  img {
    width: 40rpx;
    height: 40rpx;
    vertical-align: middle;
  }
}
.initBtm {
  height: 110rpx;
  line-height: 110rpx;
  line-height: 110rpx;
  background: #ffffff;
  color: #ccc;
  padding-right: 30rpx;
  color: #666;
  font-size: 28rpx;
  box-shadow: 1rpx 0px 4rpx 0px rgba(204, 204, 204, 1);
  .doBtn {
    display: inline-block;
    height: 76rpx;
    line-height: 76rpx;
    font-size: 32rpx;
    border: 1rpx solid #adadad;
    border-radius: 38rpx;
    padding: 0 50rpx;
    color: #666;
    margin-left: 24rpx;
  }
}
.payModal {
  position: absolute;
  top: 0;
  left: 0;
  // bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99999;
  .pay_content {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 850rpx;
    background-color: #fff;
    .title {
      width: 100%;
      height: 90rpx;
      border-bottom: 1rpx solid #e9e9e9;
      color: #333;
      font-size: 34rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      text-align: center;
      line-height: 90rpx;
      display: flex;
      p {
        flex: 1;
        color: #333;
        font-size: 32rpx;
      }
      img {
        width: 45rpx;
        height: 45rpx;
        margin: 20rpx 20rpx 0 0;
        display: inline-block;
      }
    }
    .lineItem {
      width: 100%;
      height: 100rpx;
      border-bottom: 1rpx solid #e9e9e9;
      display: flex;
      flex-direction: row;
      align-items: center;
      box-sizing: border-box;
      padding-left: 30rpx;
      color: #666;
      .cost {
        color: #333;
      }
      p {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        color: #333;
        img {
          margin-left: 0;
        }
        span {
          color: #999;
          font-size: 28rpx;
        }
      }
      img {
        width: 50rpx;
        height: 50rpx;
        margin: 0 30rpx;
      }
    }
    .sureBtn {
      padding:0 30rpx;
      box-sizing: border-box;
      color: #666;
      .total {
        margin: 30rpx 0;
        span {
          color: #ff5453;
          font-size: 36rpx;
        }
      }
      .tip {
        margin: 10rpx 30rpx 50rpx 0;
        font-size: 26rpx;
        color: rgba(153, 153, 153, 1);
      }
      .button {
        // width: 660rpx;
        height: 92rpx;
        background: rgba(74, 100, 234, 1);
        line-height: 92rpx;
        text-align: center;
        color: #fff;
        border-radius: 46rpx;
      }
    }
  }
}
.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0,0,0,.7);
  opacity: 1;
  z-index: 100;
  .out {
    height: 412rpx;
    border-radius: 15rpx;
    width: 650rpx;
    background: #fff;
    z-index: 999;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -206rpx;
    margin-left: -325rpx;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .top {
      flex: 1;
      padding: 110rpx 48rpx 0 48rpx;
      text-align: center;
      span {
        font-size: 34rpx;
        font-family:PingFangSC-Regular,PingFangSC;
        font-weight:400;
        line-height:48rpx;
      }
    }
    .btm {
      height: 100rpx;
      line-height: 100rpx;
      display: flex;
      font-size:34rpx;
      font-family:PingFangSC-Regular,PingFangSC;
      font-weight:400;
      .sure {
        background: #4A64EA;
        color: #fff;
      }
      span {
        flex: 1;
        text-align: center;
      }
      span:nth-child(1) {
        background: #f9f9f9;
      }
      span:nth-child(2) {
        background: #4A64EA;
        color: #fff;
      }
    }
  }
}
</style>
